<template>
  <Dialog 
    v-model="dialogVisible" 
    :title="dialogTitle" 
    :width="dialogWidth"
    class="customer-edit-dialog"
  >
    <div class="form-container">
      <el-form
        ref="editRef"
        v-loading="formLoading"
        :model="formData"
        :rules="formRules"
        :label-width="labelWidth"
        class="customer-form"
      >
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item label="客户名称" prop="name" class="form-item">
              <el-input 
                v-model="formData.name" 
                placeholder="请输入客户名称" 
                class="form-input"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item label="客户手机号" prop="mobile" class="form-item">
              <el-input 
                v-model="formData.mobile" 
                placeholder="请输入客户手机号" 
                class="form-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="意向等级" prop="level" class="form-item level-item">
              <div class="level-container">
                <el-radio-group v-model="formData.level" class="level-radio-group">
                  <el-radio-button label="0" class="level-btn">无意向</el-radio-button>
                  <el-radio-button label="1" class="level-btn">有意向</el-radio-button>
                  <el-radio-button label="2" class="level-btn">高意向</el-radio-button>
                  <el-radio-button label="9" class="level-btn">重要客户</el-radio-button>
                </el-radio-group>
                <el-icon @click="formData.level = ''" class="clear-icon">
                  <CloseBold />
                </el-icon>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12">
            <el-form-item label="客户需求" prop="demand" class="form-item">
              <el-input 
                v-model="formData.demand" 
                placeholder="请输入客户需求" 
                class="form-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item label="备注" prop="remark" class="form-item">
              <el-input 
                v-model="formData.remark" 
                placeholder="请输入备注" 
                class="form-input"
                type="textarea"
                :rows="2"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item label="地址" prop="address" class="form-item">
              <el-input 
                v-model="formData.address" 
                placeholder="请输入地址" 
                class="form-input"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button 
          :disabled="formLoading" 
          type="primary" 
          @click="submitForm"
          class="submit-btn"
          :loading="formLoading"
        >
          确 定
        </el-button>
        <el-button @click="dialogVisible = false" class="cancel-btn">
          取 消
        </el-button>
      </div>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { CloseBold } from '@element-plus/icons-vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { defaultProps } from '@/utils/tree'
import * as CustomerApi from '@/api/service/customer'
import { useUserStore } from '@/store/modules/user'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  name: undefined,
  mobile: undefined,
  level: undefined,
  demand: undefined,
  remark: undefined
})
const formRules = reactive({
  name: [{ required: true, message: '线索名称不能为空', trigger: 'blur' }],
})
const editRef = ref() // 表单 Ref

// 响应式布局配置
const dialogWidth = computed(() => {
  const width = window.innerWidth
  if (width < 768) return '95%'
  if (width < 1024) return '80%'
  return '1000px'
})

const labelWidth = computed(() => {
  const width = window.innerWidth
  return width < 768 ? '80px' : '100px'
})

/** 打开弹窗 */
const open = async (row: object) => {
  dialogVisible.value = true
  resetForm()
  formData.value = JSON.parse(JSON.stringify(row))
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!editRef) return
  const valid = await editRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    await CustomerApi.updateCustomer(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    name: undefined,
    mobile: undefined,
    level: undefined,
    demand: undefined,
    remark: undefined
  }
  editRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.customer-edit-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 82, 204, 0.15);
    
    @media (max-width: 768px) {
      margin: 5vh auto;
      border-radius: 8px;
    }
  }
  
  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%);
    color: white;
    padding: 20px 24px;
    border-radius: 12px 12px 0 0;
    
    @media (max-width: 768px) {
      padding: 16px 20px;
      border-radius: 8px 8px 0 0;
    }
    
    .el-dialog__title {
      color: white;
      font-weight: 600;
      font-size: 18px;
      
      @media (max-width: 768px) {
        font-size: 16px;
      }
    }
  }
  
  :deep(.el-dialog__headerbtn) {
    .el-dialog__close {
      color: white;
      font-size: 20px;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 24px;
    
    @media (max-width: 768px) {
      padding: 16px;
    }
  }
  
  :deep(.el-dialog__footer) {
    padding: 16px 24px 24px;
    
    @media (max-width: 768px) {
      padding: 12px 16px 16px;
    }
  }
}

.form-container {
  .customer-form {
    .form-item {
      margin-bottom: 20px;
      
      @media (max-width: 768px) {
        margin-bottom: 16px;
      }
      
      :deep(.el-form-item__label) {
        color: #333;
        font-weight: 500;
        font-size: 14px;
        
        @media (max-width: 768px) {
          font-size: 13px;
        }
      }
      
      .form-input {
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          border: 1px solid #e0e6ed;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #0052cc;
          }
          
          &.is-focus {
            border-color: #0052cc;
            box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.1);
          }
        }
        
        :deep(.el-textarea__inner) {
          border-radius: 8px;
          border: 1px solid #e0e6ed;
          transition: all 0.3s ease;
          resize: vertical;
          
          &:hover {
            border-color: #0052cc;
          }
          
          &:focus {
            border-color: #0052cc;
            box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.1);
          }
        }
      }
    }
    
    .level-item {
      .level-container {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        
        @media (max-width: 768px) {
          gap: 8px;
        }
        
        .level-radio-group {
          flex: 1;
          
          :deep(.el-radio-button) {
            .el-radio-button__inner {
              border-radius: 6px;
              border: 1px solid #e0e6ed;
              background: white;
              color: #666;
              font-size: 13px;
              padding: 8px 12px;
              transition: all 0.3s ease;
              
              @media (max-width: 768px) {
                padding: 6px 8px;
                font-size: 12px;
              }
              
              &:hover {
                border-color: #0052cc;
                color: #0052cc;
              }
            }
            
            &.is-active {
              .el-radio-button__inner {
                background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%);
                border-color: #0052cc;
                color: white;
                box-shadow: 0 2px 8px rgba(0, 82, 204, 0.3);
              }
            }
            
            &:first-child .el-radio-button__inner {
              border-radius: 6px;
            }
            
            &:last-child .el-radio-button__inner {
              border-radius: 6px;
            }
          }
          
          @media (max-width: 768px) {
            :deep(.el-radio-button) {
              margin-bottom: 4px;
            }
          }
        }
        
        .clear-icon {
          color: #999;
          cursor: pointer;
          font-size: 16px;
          padding: 4px;
          border-radius: 4px;
          transition: all 0.3s ease;
          
          &:hover {
            color: #ff4757;
            background: rgba(255, 71, 87, 0.1);
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  @media (max-width: 768px) {
    flex-direction: column-reverse;
    gap: 8px;
  }
  
  .submit-btn {
    :deep(.el-button) {
      background: linear-gradient(135deg, #0052cc 0%, #0066ff 100%);
      border: none;
      border-radius: 8px;
      padding: 10px 24px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
      transition: all 0.3s ease;
      
      @media (max-width: 768px) {
        width: 100%;
        padding: 12px 24px;
      }
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 82, 204, 0.4);
      }
      
      &:active {
        transform: translateY(0);
      }
      
      &.is-disabled {
        background: #ccc;
        box-shadow: none;
        transform: none;
      }
    }
  }
  
  .cancel-btn {
    :deep(.el-button) {
      background: white;
      border: 1px solid #e0e6ed;
      color: #666;
      border-radius: 8px;
      padding: 10px 24px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      @media (max-width: 768px) {
        width: 100%;
        padding: 12px 24px;
      }
      
      &:hover {
        border-color: #0052cc;
        color: #0052cc;
        background: rgba(0, 82, 204, 0.05);
      }
    }
  }
}

// 全局响应式优化
@media (max-width: 768px) {
  :deep(.el-row) {
    margin: 0 !important;
    
    .el-col {
      padding: 0 8px !important;
    }
  }
  
  :deep(.el-form-item) {
    margin-bottom: 16px !important;
  }
}

// 加载状态优化
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
}

// 滚动条美化
:deep(.el-dialog__body) {
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #0052cc;
    border-radius: 3px;
    
    &:hover {
      background: #0066ff;
    }
  }
}
</style>
